<template>
	<div class="data-list">
		<curr-app :left="245"></curr-app>
		<list-title :data="header"></list-title>
		<list-table :list="dynamicDataContentList" :tableLoading="tableLoading" :footer="true" :pagination="pagination" :appid="$route.query.appid">
			<template v-slot:data>
				<el-table-column prop="title" label="第一个字段内容"></el-table-column>
				<el-table-column prop="ip" label="IP"></el-table-column>
				<el-table-column prop="praise_num" label="点赞量"></el-table-column>
				<el-table-column prop="reply_num" label="回复量"></el-table-column>
				<el-table-column prop="add_time" label="添加时间"></el-table-column>
				<el-table-column label="前台显示状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.state" @change="changeState(scope.$index, scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="120">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="contentList(scope.$index, scope.row)">详细内容</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								删除 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
		<!-- 详细内容 开始 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialog" :close-on-click-modal="false" width="780px">
			<list-table :list="dynamicDataContent">
				<template v-slot:data>
					<el-table-column prop="attr_name" label="名称" width='150px'></el-table-column>
					<el-table-column label="值">
						<template slot-scope="scope">
							<span v-if='scope.row.attr_type != 7'>{{scope.row.attr_value}}</span>
							<div class="image-preview" v-if="scope.row.attr_type == 7 && scope.row.attr_value != ''">
								<el-image 
								style="max-width: 100px; max-height: 100px"
								:src='scope.row.attr_value[0]'
								:preview-src-list="scope.row.attr_value">
								</el-image>
							</div>
						</template>
					</el-table-column>
				</template>
			</list-table>
			<el-form :model="dynamicDataFlagForm" ref="dynamicDataFlagForm" label-width="150px" label-position="left" style="border: #e7e9f3 1px solid; margin-top: 10px; padding: 5px 0 0 10px" v-if="dynamicDataFlagForm.flags.length > 0">
				<el-form-item label="设置标示" prop="data.flagname" style="width: 700px; margin: 0px;">
					<el-checkbox-group v-model="dynamicDataFlagForm.flagname">
						<el-checkbox v-for="(item, index) in dynamicDataFlagForm.flags" :key="index" :label='item'></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('dynamicDataFlagForm')" :disabled='dynamicDataFlagForm.submitLock'>
					保 存 <span class="el-icon-loading" v-if='dynamicDataFlagForm.submitLock'></span>
				</el-button>
				<el-button @click="dialog = false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 详细内容 结束 -->
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeToBool, getSortData, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '自定义表单内容列表 [' + this.$route.query.name + ']',
				reload: true,
				buttons: [
					{
						title: '自定义表单',
						type: 'primary',
						pathName: 'pc/cms/instance/dynamicData/DynamicDataList',
						auth: false,
						query: {
							appid: this.$route.query.appid,
						},
					}
				],
			},
			auth: {
				delete: false,//删除
				changeState: false,//显示状态
				processData: false,//处理数据
			},
			dialog: false,
			dialogTitle: '详细内容',//dialog标题
			/*单个内容*/
			dynamicDataContent:[
					{
						attr_name: '',
						attr_value: '',
						attr_type: 1,
					}
				],
			/*列表数据*/
			dynamicDataContentList: [
				{
					id: '',
					title: '',
					ip: '',
					flagnum: '',
					praise_num: 0,
					reply_num: 0,
					state: true,
					add_time: '',
					content: [],
					attrName: [],
				},
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: [],
			/*处理数据*/
			dynamicDataFlagForm: {
				submitLock: false,
				/*标示数据 所有数据*/
				flags: [
					// '精选', '头条'
				],
				/*选中的标示*/
				flagname: [
					// '精选'
				],
				data: {
					id: '',//自定义表单ID
					flagIndex: []
				}
			},
		};
	},
	components: {
		ListTitle,
		ListTable,
		CurrApp
	},
	created: function() {
		/*获取列表数据*/
		this.getDynamicDataContentList()
		/*权限判断显示*/
		this.header.buttons[0].auth = (judgeAuth('dynamicDataList', this.allMenuList) == undefined)?false:true
		this.auth.delete = (judgeAuth('deleteDynamicContent', this.allMenuList) == undefined)?false:true
		this.auth.changeState = (judgeAuth('changeContentState', this.allMenuList) == undefined)?false:true
		this.auth.processData = (judgeAuth('dealDynamicContent', this.allMenuList) == undefined)?false:true
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getDynamicDataContentList()
		}
	},
	methods: {
		/*取出列表数据*/
		getDynamicDataContentList: function(){
			if(this.$api.dynamicDataContentList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.dynamicDataContentList, this.$route.query).then(res => {
					// console.log(res.data.data.list);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.dynamicDataContentList = []
							Object.keys(res.data.data.list).forEach((k) => {
								/*注释原因，用下面的一段代码了 此端代码 主要是为了 给图片添加域名，使其显示*/
								// Object.keys(res.data.data.list[k].attrName).forEach((k1) => {
								// 	// console.log(res.data.data.list[k].attrName[k1].attr_type)
								// 	if(res.data.data.list[k].attrName[k1].attr_type == 7 && res.data.data.list[k].content[k1]){//说明是图片
								// 		res.data.data.list[k].content[k1].attr_value = res.data.data.list[k].content[k1].attr_value.split(',')
								// 		Object.keys(res.data.data.list[k].content[k1].attr_value).forEach((k3) => {
								// 			if(res.data.data.list[k].content[k1].attr_value[k3]){
								// 				res.data.data.list[k].content[k1].attr_value[k3] = this.$domain.cms + '/' + res.data.data.list[k].content[k1].attr_value[k3]
								// 			}
								// 		})
								// 	}
								// })
								Object.keys(res.data.data.list[k].content).forEach((k1) => {
									Object.keys(res.data.data.list[k].attrName).forEach((k2) => {
										if(res.data.data.list[k].content[k1].attr_enname == res.data.data.list[k].attrName[k2].attr_enname){
											if(res.data.data.list[k].attrName[k2].attr_type == 7 && res.data.data.list[k].content[k1].attr_value){//说明是图片
												res.data.data.list[k].content[k1].attr_value = res.data.data.list[k].content[k1].attr_value.split(',')
												Object.keys(res.data.data.list[k].content[k1].attr_value).forEach((k3) => {
													if(res.data.data.list[k].content[k1].attr_value[k3]){
														if(res.data.data.list[k].content[k1].attr_value[k3].substring(0, 7) != 'http://' && res.data.data.list[k].content[k1].attr_value[k3].substring(0, 8) != 'https://'){//没有包含 http:// 或 https://
															res.data.data.list[k].content[k1].attr_value[k3] = this.$domain.cms + '/' + res.data.data.list[k].content[k1].attr_value[k3]
														}
													}
												})
											}
										}
									})
								})
								// console.log(res.data.data.list);

								this.dynamicDataContentList.push ({
									id: res.data.data.list[k].info_id,
									title: res.data.data.list[k].content[0]['attr_value'],
									ip: res.data.data.list[k].ip,
									flagnum: res.data.data.list[k].flagnum,
									praise_num: res.data.data.list[k].praise_num,
									reply_num: res.data.data.list[k].reply_num,
									state: changeToBool(res.data.data.list[k].state),
									add_time: res.data.data.list[k].add_time,
									content: res.data.data.list[k].content,
									attrName: res.data.data.list[k].attrName,
								});

								this.dynamicDataFlagForm.flags = (res.data.data.list[k].flag == null)?[]:res.data.data.list[k].flag.flagname
								
							})
							// console.log(this.dynamicDataContentList, 'dddd')
							this.pagination = res.data.data.pageInfo
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*单个内容*/
		contentList(index, row){
			// console.log(row)
			// console.log(this.dynamicDataContentList[index].content)
			this.dialog = !this.dialog

			this.dynamicDataFlagForm.data.id = row.id
			if(row.flagnum != ''){
				this.dynamicDataFlagForm.flagname = []
				Object.keys(row.flagnum).forEach((k3) => {
					this.dynamicDataFlagForm.flagname.push(this.dynamicDataFlagForm.flags[row.flagnum[k3]])
				})
			}else{
				this.dynamicDataFlagForm.flagname = []
			}

			this.dynamicDataContent = []
			let data = this.dynamicDataContentList[index].attrName
			let data2 = this.dynamicDataContentList[index].content
			// console.log(data2)
			Object.keys(data).forEach((k) => {
				// console.log(data[k].attr_enname)
				Object.keys(data2).forEach((k2) => {
					if(data[k].attr_enname == data2[k2].attr_enname){
						this.dynamicDataContent.push ({
							attr_name: data[k].attr_name,
							attr_value: data2[k2].attr_value,
							attr_type: data[k].attr_type,
						})
					}
				})
			})
			// console.log(this.dynamicDataContent)	
		},
		/*列表中直接修改 是否显示*/
		changeState(index, row){
			// console.log(row)
			if(this.auth.changeState && this.$api.changeContentState != undefined){
				/*请求后台*/
				this.$baseURL(this.$domain.cms)
				this.$post(this.$api.changeContentState, {
					'appid': this.appid,
					'id': row.id,
					'state': row.state,
				}).then(res => {
					// console.log(res)
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*删除*/
		handleDelete(index, row) {
			if(this.$api.deleteDynamicContent != undefined){
				if(!this.submitLock[index+1]){
					this.submitLock[index+1] = true//锁住当前的 删除按钮
					this.delTip.splice(index+1, 1, false)//提示消失
					/*请求后台删除*/
					this.$baseURL(this.$domain.cms)
					this.$get(this.$api.deleteDynamicContent, {
						appid: this.appid,
						id: row.id
					}).then(res => {
						if(res.data.code == 0){
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'success'
							});
							this.dynamicDataContentList.splice(index, 1);//删除当前行
						}else{
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'error'
							});
						}
						this.submitLock[index+1] = false//释放当前的 删除按钮
					})
					.catch(err => {})
					.finally(() => {}) 
				}
			}
		},
		/*保存标示数据*/
		submitForm(formName, flag) {
			if(this.auth.processData && this.$api.dealDynamicContent != undefined){
				if(!this.dynamicDataFlagForm.submitLock){
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.dynamicDataFlagForm.submitLock = true;
							// console.log(this.dynamicDataFlagForm.data)
							this.dynamicDataFlagForm.data.flagIndex = []
							for(let i=0; i<this.dynamicDataFlagForm.flags.length; i++){
								for(let j=0; j<this.dynamicDataFlagForm.flagname.length; j++){
									if(this.dynamicDataFlagForm.flags[i] == this.dynamicDataFlagForm.flagname[j]){
										this.dynamicDataFlagForm.data.flagIndex.push(i)
									}
								}
							}
							// console.log(this.dynamicDataFlagForm.data.flagIndex)
							this.$baseURL(this.$domain.cms)
							this.$post(this.$api.dealDynamicContent, {
								appid: this.appid,
								flagData: this.dynamicDataFlagForm.data,
							}).then(res => {
								// console.log(res);
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
									this.reload()
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
								this.dynamicDataFlagForm.submitLock = false;
							});
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				}
			}else{
				this.$message({
					showClose: true,
					message: '没有处理数据的权限',
					type: 'error'
				});
			}
		},
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
.cell
	>.el-button + .el-button
		margin-left: 0;
.image-preview, .el-table td div
	vertical-align: middle
	/deep/ img:after
		content: 'ddd'
		display: block
		font-size: 18px;
		color: #f00;
		margin-left: 300px;
		z-index: 5000;
		width: 100px;
		height: 100px;
</style>